<template>
    <div class="notice_bigbox">
        <div class="notice">
            <div class="left_icon"></div>
            <div class="line"></div>
            <div class="swipers">
                <van-swipe style="height: 16rem;" :autoplay="3000" vertical>
                    <van-swipe-item class="notice_item" v-for="(item, index) in data.slice(0, 3)" :key="index">
                        <div>{{ item.info }}</div>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <div class="right_icon"></div>
        </div>
        <div class="class_box">
            <div class="class_item" v-for="(item, index) in classarr" :key="index">
                <img class="class_img" :src="item.img" alt="">
                <div class="class_name">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import axios from 'axios';
import class1Image from '../assets/img/img/class_1.png';
import class2Image from '../assets/img/img/class_2.png';
import class3Image from '../assets/img/img/class_3.png';
import class4Image from '../assets/img/img/class_4.png';
import class5Image from '../assets/img/img/class_5.png';
import class6Image from '../assets/img/img/class_6.png';
import class7Image from '../assets/img/img/class_7.png';
import class8Image from '../assets/img/img/class_8.png';
import class9Image from '../assets/img/img/class_9.png';
import class10Image from '../assets/img/img/class_10.png';
import class11Image from '../assets/img/img/class_11.png';
import class12Image from '../assets/img/img/class_pa.png';

export default defineComponent({
    setup() {
        // 公告模块
        const data = ref([])
        const noticeapi = async () => {
            try {
                const noticedata = await axios.get('https://api.mall.leyifan.com/api/front/index');
                data.value = noticedata.data.data.notice

            } catch (err) {
                console.log(err)
            }
        }
        onMounted(() => {
            noticeapi()
        })
        // 分类模块
        const classarr = ref([
            {
                img: class1Image,
                name: "mercari"
            },
            {
                img: class2Image,
                name: "雅虎日拍"
            },
            {
                img: class4Image,
                name: "Animate"
            },
            {
                img: class5Image,
                name: "Zozotown"
            },
            {
                img: class6Image,
                name: "Rakuma"
            },
            {
                img: class7Image,
                name: "雅虎闲置"
            },
            {
                img: class8Image,
                name: "骏河屋"
            },
            {
                img: class3Image,
                name: "MAGI"
            },
            {
                img: class9Image,
                name: "一番海淘"
            },
            {
                img: class10Image,
                name: "乐天市场"
            },
            {
                img: class11Image,
                name: "Amazon"
            },
            {
                img: class12Image,
                name: "人工代购"
            }
        ])


        return {
            data,
            classarr
        }
    }
})

</script>

<style>
.notice {
    margin: 0 14rem;
    padding: 8rem 10rem;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 8rem;
}

.notice_item {
    height: 16rem;
    line-height: 16rem;
    font-size: 12rem;
}

.line {
    width: 1rem;
    margin: 0 10rem;
    background-color: #aaa;
    height: 10rem;
}

.left_icon {
    background-image: url(../assets/img/img/news.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 16rem;
    height: 16rem;
}

.right_icon {
    background-image: url(../assets/img/img/index_right.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 10rem;
    height: 10rem;
}

.van-swipe__indicators {
    display: none;
}

.swipers {
    width: 280rem;
}

.class_box {
    margin-top: 20rem;
    padding: 0 14rem;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.class_item {
    flex: 0 0 auto;
    margin-right: 16rem;
}

.class_img {
    width: 50rem;
    height: 50rem;
}

.class_name {
    font-size: 12rem;
    margin-top: 8rem;
    text-align: center;
}
.notice_bigbox{
    padding-top: 14rem;
}
</style>